<template>
  <div>
    <br>
    <el-button @click="loadFromFile" type="primary" style="width: 110px;margin-right: 10px;">Load</el-button>
     <!-- <el-button @click="saveToFile" style="width: 110px;margin-right: 10px;" type="primary">Save</el-button> -->
      <el-dropdown @command="handleSaveCommand" trigger="click">
        <el-button type="primary" style="width: 110px;margin-right: 10px;">
          Save<el-icon class="el-icon--right"><arrow-down /></el-icon>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item v-if="currentGraphName" command="save_current">
              Save to {{ currentGraphName }}
            </el-dropdown-item>
            <el-dropdown-item command="save_new">Save to a new project...</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      
      <el-dialog v-model="showSaveDialog" title="Save new project" width="30%">
        <el-input v-model="newGraphName" placeholder="Please input the name of new project" />
        <template #footer>
          <el-button @click="showSaveDialog = false">Cancel</el-button>
          <el-button type="primary" @click="saveNewCanvas">Save</el-button>
        </template>
      </el-dialog>
  </div>
  <br>
  <div id="antv">
    <splitpanes class="default-theme" vertical style="height: 1000px">
      <!-- <pane size="" ><div id="stencil"></div></pane> -->
      <pane size="" id="stencil"></pane>
      <pane>
        <Splitpanes horizontal>
          <pane><div id="graph-container"></div></pane>
          <pane v-if="showTerminal">
            <Term style="width: 100%;"/>
          </pane>
        </Splitpanes>
      </pane>
    </splitpanes>
  </div>
</template>

<script setup lang="ts">
import { Graph, Shape } from "@antv/x6";
import { Stencil } from "@antv/x6-plugin-stencil";
import { Transform } from "@antv/x6-plugin-transform";
import { Selection } from "@antv/x6-plugin-selection";
import { Snapline } from "@antv/x6-plugin-snapline";
import { Keyboard } from "@antv/x6-plugin-keyboard";
import { Clipboard } from "@antv/x6-plugin-clipboard";
import { History } from "@antv/x6-plugin-history";
import { invoke } from "@tauri-apps/api/core";
import { open, save } from "@tauri-apps/plugin-dialog";
import { writeTextFile, readTextFile } from "@tauri-apps/plugin-fs";
import { onMounted, onBeforeMount } from "vue";
import { Splitpanes, Pane } from "splitpanes";
import "splitpanes/dist/splitpanes.css";
import Term from "./Term.vue";
import { listen } from "@tauri-apps/api/event";
import { er } from "@antv/x6/lib/registry/router/er";
import { ref } from 'vue';
const savedGraphsName = ref<string[]>([]);
const currentGraphName = ref<string>('');
const showSaveDialog = ref(false);
const newGraphName = ref('');
const stencilRef = ref<Stencil | null>(null);
// import insertCss from 'insert-css'
let graph=null
// 为了协助代码演示
onMounted(() => {
  // #region 初始化画布
    graph = new Graph({
    container: document.getElementById("graph-container")!,
    width: 1700,  // 设置画布宽度
    height: 1000, // 设置画布高度
    grid: {
      size: 20, // 网格间距改为 20px（默认值通常为 10px）
      visible: true, // 确保网格可见
      type: 'dot',  // 网格类型：dot（点状）| mesh（网状）| doubleMesh（双线网状）
    },
    interacting: {
    edgeMovable: true,      // 启用连线移动
  },
  background: {
    color: '#DCDCDC', // 设置画布背景色
  },
    mousewheel: {
      enabled: true,
      zoomAtMousePosition: true,
      modifiers: "ctrl",
      minScale: 0.5,
      maxScale: 3,
    },
    connecting: {
      router: "manhattan",
      allowNode:true,
      allowEdge: false,
      connector: {
        name: "rounded",
        args: {
          radius: 8,
        },
      },
      anchor: "center",
      connectionPoint: "anchor",
      allowBlank: false,
      snap: {
        radius: 20,
      },
      createEdge() {
        return new Shape.Edge({
          attrs: {
            line: {
              stroke: "#50B7C1",
              strokeWidth: 2,
              targetMarker: null,
            },
          },
          zIndex: 10,
        });
      },
      validateConnection({ targetMagnet }) {
        return !!targetMagnet;
      },
    },
    highlighting: {
      magnetAdsorbed: {
        name: "stroke",
        args: {
          attrs: {
            fill: "#5F95FF",
            stroke: "#5F95FF",
          },
        },
      },
    },
  });
  

  // #endregion
  // #region 使用插件
  graph
    .use(
      new Transform({
        resizing: true,
        rotating: true,
      })
    )
    .use(
      new Selection({
        rubberband: true,
        showNodeSelectionBox: true,
      })
    )
    .use(new Snapline())
    .use(new Keyboard())
    .use(new Clipboard())
    .use(new History());
  // #endregion

  // #region 初始化 stencil
  const stencil = new Stencil({
    title: "examples",
    target: graph,
    stencilGraphWidth: 500,
    stencilGraphHeight: 180,
    collapsable: true,
    // getDragNode(node) {
    //   const draggedNode = node.clone();
    //   draggedNode.resize(620, 320);
    //   draggedNode.attr({
    //     image: { width: 620, height: 320, refX: 0, refY: 0 },
    //     label: { refX: 270, refY: 150, fontSize: 14 } // 增大字体
    //   });
    //   return draggedNode;
    // },
    groups: [
      {
        title: "peripherals",
        name: "group1",
        graphHeight: 250,
        layoutOptions: {
          rowHeight: 80,
        },
      },
      {
        title: "boards",
        name: "group2",
        graphHeight: 250,
        layoutOptions: {
          rowHeight: 80,
        },
      },
      {
        title: "Battery",
        name: "group3",
        graphHeight: 250,
        layoutOptions: {
          rowHeight: 80,
        },
      },
      {
        title: "save",
        name: "group4",
        graphHeight: 500,
        layoutOptions: {
          rowHeight: 80,
        },
      },
    ],
    layoutOptions: {
      columns: 2,
      columnWidth: 80,
      rowHeight: 55,
    },
  });
  stencilRef.value = stencil;
  document.getElementById("stencil")!.appendChild(stencil.container);
  // #endregion

  // #region 快捷键与事件
  graph.bindKey(["meta+c", "ctrl+c"], () => {
    const cells = graph.getSelectedCells();
    if (cells.length) {
      graph.copy(cells);
    }
    return false;
  });
  graph.bindKey(["meta+x", "ctrl+x"], () => {
    const cells = graph.getSelectedCells();
    if (cells.length) {
      graph.cut(cells);
    }
    return false;
  });
  graph.bindKey(["meta+v", "ctrl+v"], () => {
    if (!graph.isClipboardEmpty()) {
      const cells = graph.paste({ offset: 32 });
      graph.cleanSelection();
      graph.select(cells);
    }
    return false;
  });

  // undo redo
  graph.bindKey(["meta+z", "ctrl+z"], () => {
    if (graph.canUndo()) {
      graph.undo();
    }
    return false;
  });
  graph.bindKey(["meta+shift+z", "ctrl+shift+z"], () => {
    if (graph.canRedo()) {
      graph.redo();
    }
    return false;
  });

  // select all
  graph.bindKey(["meta+a", "ctrl+a"], () => {
    const nodes = graph.getNodes();
    if (nodes) {
      graph.select(nodes);
    }
  });

  // delete
  graph.bindKey("backspace", () => {
    const cells = graph.getSelectedCells();
    if (cells.length) {
      graph.removeCells(cells);
    }
  });

  // zoom
  graph.bindKey(["ctrl+1", "meta+1"], () => {
    const zoom = graph.zoom();
    if (zoom < 1.5) {
      graph.zoom(0.1);
    }
  });
  graph.bindKey(["ctrl+2", "meta+2"], () => {
    const zoom = graph.zoom();
    if (zoom > 0.5) {
      graph.zoom(-0.1);
    }
  });

  // 控制连接桩显示/隐藏
  const showPorts = (ports: NodeListOf<SVGElement>, show: boolean) => {
    for (let i = 0, len = ports.length; i < len; i += 1) {
      ports[i].style.visibility = show ? "visible" : "hidden";
    }
  };
  graph.on("node:mouseenter", () => {
    const container = document.getElementById("graph-container")!;
    const ports = container.querySelectorAll(
      ".x6-port-body"
    ) as NodeListOf<SVGElement>;
    showPorts(ports, true);
  });
  graph.on("node:mouseleave", () => {
    const container = document.getElementById("graph-container")!;
    const ports = container.querySelectorAll(
      ".x6-port-body"
    ) as NodeListOf<SVGElement>;
    showPorts(ports, false);
  });

  graph.on("node:contextmenu", ({ node }) => {
    // 获取节点的 label 值
    const sourceLabel = node?.label;
    // console.log('Source Node Labelhhhhhhhhhha:', sourceLabel);
    // e.preventDefault(); // 阻止默认右键菜单
    showContextMenu(sourceLabel);
  });

  graph.on("node:dblclick", ({ node }) => {
    const sourceLabel = node?.label;
    console.log(node.label);

    let d = document.getElementById(sourceLabel);
    console.log(d);

    d && (d.style.display = "none");
  });

  graph.on('node:added', ({ node }) => {
  const data = node.getData(); // 获取节点自定义数据
  if (data?.image && data?.image) {
    node.resize(data.image.width, data.image.height); // 动态调整大小
    node.prop('attrs/image/width', data.image.width); 
    node.prop('attrs/image/height', data.image.height); 
    node.prop('attrs/image/refX', 0); 
    node.prop('attrs/image/refY', 0); 
    node.prop('attrs/label/refX', data.label.refX); 
    node.prop('attrs/label/refY', data.label.refY); 
    node.prop('attrs/label/fontSize', data.label.fontSize); 
  }
  if (node.getData()?.isSavedGraph) {
    const graphName = node.getData().graphName;
    const graphData = JSON.parse(localStorage.getItem(`x6-graph-${graphName}`)!);
    graph.fromJSON(graphData);
    currentGraphName.value = graphName;
    alert(` "${graphName}" 已加载`);
  }
});

  let lednode = null;

  graph.on("edge:connected", ({ edge }) => {
    // 获取连接线的源节点和目标节点
    const sourceNode = edge.getSourceNode();
    const targetNode = edge.getTargetNode();

    // 获取节点的 label 值
    const sourceLabel = sourceNode?.label;
    const targetLabel = targetNode?.label;

    // invoke('user_repl', {source:sourceLabel, target:targetLabel});

    console.log("Source Node Label:", sourceLabel);
    console.log("Source Node Label:", typeof sourceLabel);
    console.log("Target Node Label:", targetLabel);
    if (sourceLabel === "LED") {
      lednode = sourceNode;
      console.warn(`lednode: ${lednode}`);
    }
  });

  // 启用边移动（默认已通过edgeMovable启用）
graph.on('edge:mouseenter', ({ edge }) => {
  edge.addTools([         // 悬浮时显示工具
    {
      name: 'vertices',   // 路径点工具
      args: {
        attrs: {
          fill: '#ff8800' // 橙色控制点
        }
      }
    }
  ])
})

graph.on('edge:mouseleave', ({ edge }) => {
  edge.removeTools()      // 移出时隐藏工具
})







// let hoveredPortId = null; // 记录当前悬停的连接点ID

// // 1. 连接点鼠标进入事件
// graph.on('port:mouseenter', ({ node, port }) => {
//   // 如果已有悬停的连接点，先恢复其样式
//   if (hoveredPortId) {
//     const prevPort = node.getPort(hoveredPortId);
//     if (prevPort) {
//       node.portProp(hoveredPortId, 'attrs/circle', {
//         stroke: '#5F95FF',
//         fill: '#fff',
//         style: { visibility: 'hidden' }
//       });
//     }
//   }

//   // 设置当前连接点为红色并显示
//   node.portProp(port.id, 'attrs/circle', {
//     stroke: '#ff4d4f',
//     fill: '#ffccc7',
//     style: { visibility: 'visible' }
//   });

//   hoveredPortId = port.id; // 更新当前悬停ID
// });

// // 2. 连接点鼠标离开事件
// graph.on('port:mouseleave', ({ node, port }) => {
//   if (hoveredPortId === port.id) {
//     node.portProp(port.id, 'attrs/circle', {
//       stroke: '#5F95FF',
//       fill: '#fff',
//       style: { visibility: 'hidden' }
//     });
//     hoveredPortId = null; // 清除悬停状态
//   }
// });


// graph.on('node:mouseenter', ({ node }) => {
//   const ports = node.getPorts();
//   console.log("...............................")
//   console.log(ports)
//   ports.forEach(port => {
//     node.portProp(port.id, 'attrs/circle', {
//       stroke: '#ff4d4f',
//       fill: '#ffccc7',
//       style: { visibility: 'visible' }
//     });
//   });
// });

// graph.on('node:mouseleave', ({ node }) => {
//   const ports = node.getPorts();
//   ports.forEach(port => {
//     node.portProp(port.id, 'attrs/circle', {
//       stroke: '#5F95FF',
//       fill: '#fff',
//       style: { visibility: 'hidden' }
//     });
//   });
// });


  listen("returned_command", (ev) => {
    if (lednode === null) return;
    let payload = ev.payload;
    let val = parseInt(payload, 16);
    if (val === 0x20) {
      lednode.setAttrs({ body: { fill: "#fff" }, label: { fill: "#000" } });
    } else if (val === 0) {
      lednode.setAttrs({ body: { fill: "#555" }, label: { fill: "#fff" } });
    }
  });

  async function onclick(
    sourceLabel,
    select1Value,
    input1,
    select2Value,
    input2
  ) {
    console.log("sourceLabel:", sourceLabel);
    console.log("sourceLabeltype:", typeof sourceLabel);
    console.log("select1Value:", select1Value);
    console.log("select1Valuetype:", typeof select1Value);
    console.log("input1:", input1);
    console.log("input1type:", typeof input1);
    console.log("select2Value:", select2Value);
    console.log("input2:", input2);
    // 在用invoke向tauri传递参数的时候要注tyvue这边的参数名称可能与tauri那边不一致。
    invoke("add_repl", {
      source: sourceLabel,
      target: select1Value,
      targetValue: input1,
      interruptTarget: select2Value,
      interruptIndex: input2,
    });
  }

  

  async function showContextMenu(sourceLabel) {
    console.log(sourceLabel);
    let d = document.getElementById(sourceLabel);
    console.log(d);

    if (d) return (d.style.display = "block");

    const contextMenu = document.createElement("div");
    contextMenu.setAttribute("id", sourceLabel);
    contextMenu.style.position = "absolute";
    contextMenu.style.left = `${event.clientX}px`;
    contextMenu.style.top = `${event.clientY}px`;
    contextMenu.style.backgroundColor = "#fff";
    contextMenu.style.border = "1px solid #ddd";
    contextMenu.style.padding = "10px";

    // 创建下拉选择框
    const select1 = document.createElement("select");
    // 添加选项
    const option11 = document.createElement("option");
    option11.value = "gpioPortA";
    option11.text = "gpioPortA";
    select1.add(option11);

    const option12 = document.createElement("option");
    option12.value = "gpioPortB";
    option12.text = "gpioPortB";
    select1.add(option12);

    const option13 = document.createElement("option");
    option13.value = "gpioPortC";
    option13.text = "gpioPortC";
    select1.add(option13);

    const option14 = document.createElement("option");
    option14.value = "gpioPortD";
    option14.text = "gpioPortD";
    select1.add(option14);

    contextMenu.appendChild(select1);

    // 创建文本框
    const input1 = document.createElement("input");
    input1.type = "text";
    input1.placeholder = "Enter text...";
    contextMenu.appendChild(input1);

    // 创建下拉选择框
    const select2 = document.createElement("select");
    // 添加选项
    const option21 = document.createElement("option");
    option21.value = "gpioPortA";
    option21.text = "gpioPortA";
    select2.add(option21);

    const option22 = document.createElement("option");
    option22.value = "gpioPortB";
    option22.text = "gpioPortB";
    select2.add(option22);

    const option23 = document.createElement("option");
    option23.value = "gpioPortC";
    option23.text = "gpioPortC";
    select2.add(option23);

    const option24 = document.createElement("option");
    option24.value = "gpioPortD";
    option24.text = "gpioPortD";
    select2.add(option24);

    contextMenu.appendChild(select2);

    // 创建文本框
    const input2 = document.createElement("input");
    input2.type = "text";
    input2.placeholder = "Enter text...";
    contextMenu.appendChild(input2);

    // 创建按钮
    const button = document.createElement("button");
    button.textContent = "Enter";
    button.onclick = () => {
      // 在按钮点击时执行onclick函数
      onclick(
        sourceLabel,
        select1.value,
        input1.value,
        select2.value,
        input2.value
      );
      document.body.removeChild(contextMenu); // 移除菜单
    };
    contextMenu.appendChild(button);

    // 将菜单添加到页面
    document.body.appendChild(contextMenu);
  }

  // #endregion

  // #region 初始化图形
const commonPortAttrs = {
  circle: {
    r: 4,
    magnet: true,
    stroke: "#5F95FF",
    strokeWidth: 1,
    fill: "#fff",
    style: {
      visibility: "hidden",
    },
  },
};

let globalIndex = 0;

function createPorts(positionName: string,start: number, count: number,initialOffset:number) {
  const groups = Array.from({ length: count }, (_, i) => {
    const portName = `point${++globalIndex}`;
    const baseOffset = start + i * 15.5;
    
    if (positionName === "top"||positionName === "bottom") {
      return {
        [portName]: {
          position: {name: positionName,args: {dx: baseOffset,dy: initialOffset}},
          attrs: commonPortAttrs
        }
      };
    } else {
      return {
        [portName]: {
          position: { name: positionName, args: {dx: initialOffset,dy: baseOffset} },
          attrs: commonPortAttrs
        }
      };
    }
  }).reduce((acc, curr) => ({ ...acc, ...curr }), {});
  const items = Object.keys(groups).map(group => ({ group }));
  return { groups, items };
}

function mergePorts(...allPorts: ReturnType<typeof createPorts>[]) {
  return {
    groups: Object.assign({}, ...allPorts.map(p => p.groups)),
    items: ([] as {group: string}[]).concat(...allPorts.map(p => p.items))
  };
}

const ports=mergePorts(createPorts("top",0,1,0),createPorts("bottom",0,1,0),createPorts("left",0,1,0),createPorts("right",0,1,0));

  Graph.registerNode(
    "custom-rect",
    {
      inherit: "rect",
      width: 66,
      height: 36,
      attrs: {
        body: {
          strokeWidth: 1,
          stroke: "#5F95FF",
          fill: "#EFF4FF",
        },
        text: {
          fontSize: 12,
          fill: "#262626",
        },
      },
      ports: ports,
    },
    true
  );

  Graph.registerNode(
    "custom-polygon",
    {
      inherit: "polygon",
      width: 66,
      height: 36,
      attrs: {
        body: {
          strokeWidth: 1,
          stroke: "#5F95FF",
          fill: "#EFF4FF",
        },
        text: {
          fontSize: 12,
          fill: "#262626",
        },
      },
      ports: {
        ...ports,
        items: [
          {
            group: "top",
          },
          {
            group: "bottom",
          },
        ],
      },
    },
    true
  );

  Graph.registerNode(
    "custom-circle",
    {
      inherit: "circle",
      width: 45,
      height: 45,
      attrs: {
        body: {
          strokeWidth: 1,
          stroke: "#5F95FF",
          fill: "#EFF4FF",
        },
        text: {
          fontSize: 12,
          fill: "#262626",
        },
      },
      ports: ports,
    },
    true
  );

  Graph.registerNode(
    "custom-image",
    {
      inherit: "rect",
      width: 60,
      height: 60,
      markup: [
        {
          tagName: "rect",
          selector: "body",
        },
        {
          tagName: "image",
        },
        {
          tagName: "text",
          selector: "label",
        },
      ],
      attrs: {
        body: {
          stroke: "#DCDCDC",
          fill: "#DCDCDC",
        },
        image: {
        },
        label: {
          refX: 3,
          refY: 2,
          textAnchor: "left",
          textVerticalAnchor: "top",
          fontSize: 10,
          fill: "#6495ED",
        },
      },
    },
    true
  );

  const r1 = graph.createNode({
    shape: "custom-image",
    label: "LED",
    attrs: {
      image: {
        "xlink:href": "../../public/peripherals/f3e38030cc2615977cc05f711b662e79.png",
        width: 50,
        height: 50,
        refX: 5,
        refY: 9,
      },
    },
    ports:mergePorts(createPorts("bottom",-20,1,0),createPorts("bottom",20,1,0)),
    data: {
      image: {
        width: 140,
        height: 140,
      },
      label: {
        refX: 55,
        refY: 0,
        fontSize:14,
      },
    },
  });
  const r2 = graph.createNode({
    shape: "custom-image",
    label: "Button",
    attrs: {
      image: {
        "xlink:href": "../../public/peripherals/85a8f37d7cac59832496fffe7d1eb5db.png",
        width: 40,
        height: 40,
        refX: 9,
        refY: 14,
      },
    },
    ports:ports,
  });
  const r3 = graph.createNode({
    shape: "custom-image",
    label: "Sensor",
  });
  const r4 = graph.createNode({
    shape: "custom-image",
    label: "Screen",
  });
  const r5 = graph.createNode({
    shape: "custom-image",
    label: "ADC",
  });
  const r6 = graph.createNode({
    shape: "custom-image",
    label: "Uart",
  });
  const r7 = graph.createNode({
    shape: "custom-image",
    label: "Uart",
  });
  stencil.load([r1, r2, r3, r4, r5, r6], "group1");

  const imageShapes = [
    {
      label: "STM32F4\nDiscovery",
      image: "../../public/Arduino_DUE_V02b_breadboard.svg",
      width: 50,
      height: 50,
      refX: 5,
      refY: 16,
      width1: 620,
      height1: 320,
      refX1: 270,
      refY1: 150,
      fontSize:14,
      //'https://gw.alipayobjects.com/zos/bmw-prod/687b6cb9-4b97-42a6-96d0-34b3099133ac.svg',
      ports: mergePorts(createPorts("top",-187,10,15),createPorts("top",-25.5,8,15),createPorts("top",111.5,8,15),createPorts("right",-146.5,18,-47),createPorts("right",-146.5,18,-28),createPorts("bottom",-132.5,8,-18),createPorts("bottom",4.5,8,-18),createPorts("bottom",141.5,8,-18)),
    },
    {
      label: "STM32F7\nDiscovery",
      image: '../../public/image.png',
      width: 50,
      height: 50,
      refX: 0,
      refY: 0,
      width1: 620,
      height1: 320,
      refX1: 270,
      refY1: 150,
      fontSize:14,
    },
    {
      label: "Arudino uno",
      image: "../../public/image.png",
      width: 50,
      height: 50,
      refX:3,
      refY: 12,
      width1: 440,
      height1: 320,
      refX1: 70,
      refY1: 160,
      fontSize:14,
      ports: mergePorts(createPorts("top",-80.5,10,15),createPorts("top",81,8,15),createPorts("bottom",-26,8,-15),createPorts("bottom",111,6,-15)),
    },
    {
      label: "K210",
      image: "https://gw.alipayobjects.com/zos/bmw-prod/6eb71764-18ed-4149-b868-53ad1542c405.svg",
      width: 50,
      height: 50,
      refX: 5,
      refY: 16,
    },
    {
      label: "NXP",
      image: "https://gw.alipayobjects.com/zos/bmw-prod/c36fe7cb-dc24-4854-aeb5-88d8dc36d52e.svg",
      width: 50,
      height: 50,
      refX: 5,
      refY: 16,
    },
    {
      label: "Xtensa",
      image: "https://gw.alipayobjects.com/zos/bmw-prod/2010ac9f-40e7-49d4-8c4a-4fcf2f83033b.svg",
      width: 50,
      height: 50,
      refX: 5,
      refY: 16,
    },
  ];

  graph.on("node:resizing", ({ node }) => {
    const size = node.size();
    node.attr("image/width", size.width);
    node.attr("image/height", size.height);
  });

  const imageNodes = imageShapes.map((item) =>
    graph.createNode({
      shape: "custom-image",
      label: item.label,
      attrs: {
        image: {
          "xlink:href": item.image,
          width: item.width,
          height: item.height,
          refX: item.refX,
          refY: item.refY,
        },
      },
      data: {
        image: {
          width: item.width1,
          height: item.height1,
        },
        label: {
          refX: item.refX1,
          refY: item.refY1,
          fontSize:item.fontSize,
        },
      },
      ports:item.ports,
    })
  );
  stencil.load(imageNodes, "group2");


  const Batterylist = [
    {
      label: "电源负极",
      image:'../../public/battery/c7410ef705eeaaa1e25510c4bc0254dc.png',
      width: 45,
      height: 45,
      refX: 5,
      refY: 13,
    },
    {
      label: "模拟信号电源",
      image: "../../public/battery/39ea5cdc4541e4b232941a1b6753c42d.png",
      width: 40,
      height: 40,
      refX: 9,
      refY: 15,
    },
    {
      label: "接线端子",
      image: "../../public/battery/a273ec10086d189cdfebb584dcaef482.png",
      width: 45,
      height: 45,
      refX: 5,
      refY: 13,
    },
  ];

  const BatteryNodes = Batterylist.map((item) =>
    graph.createNode({
      shape: "custom-image",
      label: item.label,
      attrs: {
        image: {
          "xlink:href": item.image,
          width: item.width,
          height: item.height,
          refX: item.refX,
          refY: item.refY,
        },
      },
      ports:createPorts("top",0,1,0),
      data: {
        image: {
          width: 60,
          height: 60,
        },
        label: {
          refX: 4,
          refY: 70,
          fontSize:14,
        },
      },
    })
  );
  stencil.load(BatteryNodes, "group3");

    // 初始化时加载已保存的图表列表
  for (let i = 0; i < localStorage.length; i++) {
    console.log(localStorage.length);
    const key = localStorage.key(i);
    if (key?.startsWith('x6-graph-')) {
      const name = key.replace('x6-graph-', '');
      if (!savedGraphsName.value.includes(name)) {
        savedGraphsName.value.push(name);
      }
    }
  }
  updateStencilGroup4();
  // #endregion

});

const props = defineProps({
  showTerminal: Boolean,
});

const updateStencilGroup4 = () => {
  const savedNodes = savedGraphsName.value.map(name => {
    return graph.createNode({
      shape: "custom-rect",
      label: name,
      attrs: {
        body: {
          fill: "#E6F7FF",
        },
        text: {
          text: name,
          fontSize: 10,
        },
      },
      data: {
        isSavedGraph: true,
        graphName: name
      },
    });
  });
  console.log(savedNodes.length);
  stencilRef.value.load(savedNodes, "group4");
}

const saveToFile = async () => {
  // const graphData = graph.toJSON(); 
  // localStorage.setItem('x6-graph', JSON.stringify(graphData));
  // alert("保存成功");
  if (currentGraphName.value) {
    // 保存到当前画布
    const graphData = graph.toJSON();
    localStorage.setItem(`x6-graph-${currentGraphName.value}`, JSON.stringify(graphData));
    alert("保存成功");
  } else {
    // 显示保存对话框
    showSaveDialog.value = true;
  }
}

// 添加新画布保存函数
const saveNewCanvas = async () => {
  if (!newGraphName.value) {
    alert("请输入名称");
    return;
  }
  const graphData = graph.toJSON();
  localStorage.setItem(`x6-graph-${newGraphName.value}`, JSON.stringify(graphData));
  
  // 更新画布列表
  if (!savedGraphsName.value.includes(newGraphName.value)) {
    savedGraphsName.value.push(newGraphName.value);
  }
  currentGraphName.value = newGraphName.value;
  newGraphName.value = '';
  showSaveDialog.value = false;
  
  alert("保存成功");
  updateStencilGroup4();
};

const handleSaveCommand = (command: string) => {
  if (command === 'save_current') {
    saveToFile();
  } else if (command === 'save_new') {
    showSaveDialog.value = true;
  } else if (command.startsWith('load_')) {
    const graphName = command.substring(5);
    const savedData = localStorage.getItem(`x6-graph-${graphName}`);
    if (savedData) {
      graph.fromJSON(JSON.parse(savedData));
      currentGraphName.value = graphName;
      alert("加载成功");
    }
  }
};

const loadFromFile = async () =>  {
  // 提示用户选择打开的文件路径和文件名
  // const filePaths = await open({
  //   defaultPath: "graphData.json",
  //   filters: [
  //     { name: "JSON files", extensions: ["json"] },
  //     { name: "All files", extensions: ["*"] },
  //   ],
  // });

  // if (filePaths && filePaths.length > 0) {
  //   // 使用 Tauri 的 fs 模块读取文件内容
  //   try {
  //     const jsonStr = await readTextFile(filePaths);

  //     // 解析 JSON 数据并加载到图表中
  //     const graphData = JSON.parse(jsonStr);
  //     graph.fromJSON(graphData);
  //     console.log("File loaded successfully.");
  //   } catch (error) {
  //     console.error("Error loading file:", error);
  //   }
  // }

    const savedData = localStorage.getItem('x6-graph-333');
    if (savedData) {
      graph.fromJSON(JSON.parse(savedData)); // 恢复画布
      alert("加载成功");
    }
  }
</script>

<style scoped>
#antv {
  width: 100%;
  height: 1000px;
  display: flex;
  border: 1px solid #dfe3e8;
}

#stencil {
  width: 250px;
  height: 1000px;
  position: relative;
  border-right: 1px solid #dfe3e8;
}

#graph-container {
  width: 8000px;
  height: 1000px;
}
.x6-edge {
  z-index: 2; /* 连线层级高于节点（默认节点z-index为1） */
}
.x6-widget-stencil {
  background-color: #fff;
}

.x6-widget-stencil-title {
  background-color: #fff;
}

.x6-widget-stencil-group-title {
  background-color: #fff !important;
}

.x6-widget-transform {
  margin: -1px 0 0 -1px;
  padding: 0px;
  border: 1px solid #239edd;
}

/* 仅悬停的连接点变红 */
.port-hover-target:hover {
  visibility: visible !important;
  stroke: #ff4d4f !important;
  fill: #ffccc7 !important;
  transition: all 0.3s;
}

/* 非悬停的连接点保持隐藏 */
.x6-port-body:not(:hover) {
  visibility: hidden !important;
}

.x6-widget-transform > div {
  border: 1px solid #239edd;
}

.x6-widget-transform > div:hover {
  background-color: #3dafe4;
}

.x6-widget-transform-active-handle {
  background-color: #3dafe4;
}

.x6-widget-transform-resize {
  border-radius: 0;
}

.x6-widget-selection-inner {
  border: 1px solid #239edd;
}

.x6-widget-selection-box {
  opacity: 0;
}
.port-hover-target:hover {
    visibility: visible !important;
    stroke: #ff4d4f !important;
    fill: #ff4d4f !important;
  }
  /* .x6-port-body:not(:hover) {
    visibility: visible !important;
  } */
.splitpanes__pane {
  display: flex;
  justify-content: space-around;
  /* align-items: center; */
  font-family: Helvetica, Arial, sans-serif;
  color: rgba(255, 255, 255, 0.6);
  font-size: 5em;
}
</style>
